
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import instance from '../../api/request';
import { useNavigate } from 'react-router-dom';
import './ll.css'
// import { Image } from 'antd';
function Index() {
    const nav=useNavigate()
    const ss=()=>{
        alert(826791)
    }
    type FieldType = {
        username?: string;
        password?: string;
        account?: string;
        yzm?:string;
      };
      
      const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        instance.post('/login',values).then(res=>{
            if(res.data.token){
                localStorage.setItem('token',res.data.token)
                alert('登录成功')
                nav('/home')
            }
        })
      };
      
      const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
      
  return (
    <div className='box'>
        <img src="" alt="" style={{width:'100vw',height:'800px'}}
        onClick={()=>nav('/login')}/>
     
        <div className="right" >
            
        <h3>物联网综合业务支撑云平台</h3>
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      label=""
      name="account"
      rules={[{ required: true, message: '请输入正确的用户名' }]}
    >
      <Input placeholder='用户名预留手机号'/>
    </Form.Item>

    <Form.Item<FieldType>
      label=""
      name="password"
      rules={[{ required: true, message: '请输入正确的密码' }]}
    >
        {/* 完成登录的校验， 非空验证， 密码要求6-12位数字 字母组成 */}
        <Input placeholder='密码'pattern='/^[0-9A-Za-z]{6,12}$]/'/>
    </Form.Item>
    <Form.Item<FieldType>
      label=""
      name="yzm"
      rules={[{ required: true, message: '请输入验证码' }]}
    >
        <div style={{display:'flex'}}>
        <Input placeholder='验证码'/>
        <Button onClick={ss}>获取验证码</Button>
        </div>
      
    </Form.Item>
    <Form.Item<FieldType>  valuePropName="checked" label={null}>
      <Checkbox>记住密码</Checkbox>
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
        </div>
     
    </div>
  )
}

export default Index
